<template>
  <div id="like-collection" v-if="artistLikes.count != null">
    <div class="switch-btn-box">
      <div class="btn-item" @click="$router.push('art')">艺术品</div>
      <div class="btn-item active">合集</div>
    </div>
    <div class="col-box">
      <CollectionItem
        class="col-item"
        v-for="item in artistLikes.data"
        :colData="item"
        :key="item.id"
      />
    </div>
    <div class="pagination" v-if="artistLikes.count != 0">
      <el-pagination
        :page-size="pageSize"
        :pager-count="5"
        layout="prev, pager, next"
        :current-page="pageIndex"
        :total="artistLikes.count"
        background
        @prev-click="prevPage"
        @next-click="nextPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div class="no-result" v-if="artistLikes.count == 0">
      <span>什么都没找到</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CollectionItem from "@/components/CollectionItem";
export default {
  name: "ArtistLikeCollection",
  components: {
    CollectionItem,
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 20,
      type: "array",
      address: "",
    };
  },
  mounted() {
    this.address = this.$route.params.address;
    this.$store.dispatch("artistLikes", {
      pageIndex: this.pageIndex.toString(),
      pageSize: this.pageSize.toString(),
      type: this.type,
      other_address: this.address,
    });
  },
  computed: {
    ...mapState({
      artistLikes: (store) => store.artist.artistLikes,
    }),
  },
  methods: {
    // 上一页
    prevPage() {
      this.pageIndex -= 1;
      this.$store.dispatch("artistLikes", {
        pageIndex: this.pageIndex.toString(),
        pageSize: this.pageSize.toString(),
        type: this.type,
        other_address: this.address,
      });
    },
    // 下一页
    nextPage() {
      this.pageIndex += 1;
      this.$store.dispatch("artistLikes", {
        pageIndex: this.pageIndex.toString(),
        pageSize: this.pageSize.toString(),
        type: this.type,
        other_address: this.address,
      });
    },

    // 页数改变
    pageChange(page) {
      this.pageIndex = page;

      this.$store.dispatch("artistLikes", {
        pageIndex: page.toString(),
        pageSize: this.pageSize.toString(),
        type: this.type,
        other_address: this.address,
      });
    },
  },
};
</script>

<style lang='less'>
#like-collection {
  padding: 0 30px;
  .switch-btn-box {
    display: flex;
    justify-content: center;
    .btn-item {
      cursor: pointer;
      margin-left: 10px;
      padding: 5px 10px;
      border-radius: 99px;
      border: 1px solid #eee;
      font-size: 14px;
    }
    .active {
      background: var(--themeColor2);
      color: #fff;
      border: 1px solid var(--themeColor2);
    }
  }
}
</style>